import React, { PureComponent } from 'react'

import {
  Grid
} from 'antd-mobile'

import {
  HotCateWrap,
  H1Container
} from './StyledCookBook'

import { get } from '@/utils/http'

export default class HotCate extends PureComponent {

  state = {
    hotCateList: [],
    columnNum: 4
  }

  handleClick() {
    console.log(0)
  }

  render() {
    // let hotCateList = this.props.list.slice(0, 10).map((item) => {
    //   return {
    //     img: item.img,
    //     title: item.name
    //   }
    // })
    return (
      <HotCateWrap>
        <H1Container>热门分类</H1Container>
        <div>
          <Grid 
            data={this.state.hotCateList}
            columnNum={this.state.columnNum}
            hasLine={false}
            renderItem={dataItem => (
              <div className="grid-item">
                <img src={dataItem.img} alt="" />
                <div>
                  <span>{dataItem.title}</span>
                </div>
              </div>
            )}
            onClick={this.handleClick}
          />
        </div>
      </HotCateWrap>
    )
  }

  async componentDidMount() {
    let result = await get({
      url: '/api/hotcat'
    })

    this.setState({
      hotCateList: [
        ...result.data,
        {
          title: '更多...'
        }
      ]
    })
  }
}
